<template>
    <div class="cl-list">
        <slot></slot>
        <div class="tc ptb10 fs-14" v-if="finished&&finishedText">{{finishedText==undefined? "没有更多了" : finishedText}}</div>
        <div class="tc ptb10 fs-14 lh16" v-else-if="loading">
            <van-loading size="32rpx" type="spinner" />
            <span class="loading">加载中...</span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['loading', 'finished', 'finishedText', 'list', 'offset'],
    data(){
        return {
            allDiff: wx.getSystemInfoSync().windowHeight + (this.offset || 200),
            lastScrollTop: 0,
            lastLoadingTime: 0
        }
    },
    mounted(){
        
    },
    methods: {
        checkLoad(){
            var vm = this
            wx.createSelectorQuery().select('.cl-list').boundingClientRect(function (rect) {
                //防止一秒内多次触发 未结束  没有在加载中 
                if((new Date().getTime()-vm.lastLoadingTime)>1000 && !vm.finished && !vm.loading && rect.bottom < vm.allDiff){
                    vm.lastLoadingTime = new Date().getTime()
                    vm.$emit('load')
                }
            }).exec()
        }
    },
    onPageScroll(e, e1){
        if(e.scrollTop - this.lastScrollTop <= 0){
            //向上滚动 不处理
            this.lastScrollTop = e.scrollTop
            return
        }
        this.lastScrollTop = e.scrollTop
        if(this.finished || this.loading){
            return
        }
        this.checkLoad()
    }
}
</script>
<style lang="scss">
.cl-list{
    .loading{
        position: relative;
        top: -2px;
    }
}
</style>
